<template>
  <div class="blog-setting-basic">
    <!-- 基础信息容器 -->
    <el-card shadow="hover" style="max-width: 600px; margin: 20px auto;">
      <!-- 头像展示 -->
      <div class="avatar-box" style="text-align: center; margin: 15px 0;">
        <el-image 
          :src="settingData.avatar" 
          fit="cover" 
          style="width: 100px; height: 100px; border-radius: 50%;"
          fallback="https://tva1.sinaimg.cn/crop.0.0.1080.1080.180/006y8mN6ly1g6e2tdgve1j30u00u0n0j.jpg"
        ></el-image>
      </div>

      <!-- 核心文字信息 -->
      <el-form :model="settingData" label-width="100px" style="padding: 0 20px;">
        <el-form-item label="博客名称">
          <span>{{ settingData.blogName || '未设置' }}</span>
        </el-form-item>
        <el-form-item label="博主">
          <span>{{ settingData.author || '未设置' }}</span>
        </el-form-item>
        <el-form-item label="博客简介">
          <span>{{ settingData.introduction || '未设置' }}</span>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'BlogSettingBasic',
  data() {
    return {
      settingData: {} // 存储博客设置基础数据
    };
  },
  created() {
    this.getBlogSetting(); // 初始化请求数据
  },
  methods: {
    async getBlogSetting() {
      const res = await this.$axios.post('http://47.104.167.34:9110/api/blog/setting/detail');
      if (res.data.success) {
        this.settingData = res.data.data; // 赋值基础数据
      } else {
        this.$message.error(`获取失败：${res.data.message || '未知错误'}`);
      }
    }
  }
};
</script>

<style scoped>
/* 仅保留基础样式，确保展示简洁 */
.blog-setting-basic {
  padding: 20px;
}
</style>